import React from "react";
import { Typography } from "@mui/material";
import { Link } from "react-router-dom";
import "./styles.css";
import axios from 'axios';
import { withRouter } from 'react-router-dom';
/**
 * Define UserDetail, a React component of CS142 Project 5.
 */
class UserDetail extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const userId = this.props.match.params.userId;
    const users = window.cs142models.userModel(userId);
    return (
      <div>
        <div style={{display: "flex", justifyContent: "center", margin: "20px"}}>
          <Typography variant="body1" style={{border: "1px solid black", display: "flex", justifyContent: "center", width: "500px"}}>
            userId: {" " + users._id}{<br/>}
            name: {" " + users.first_name + " " + users.last_name}{<br/>}
            location: {" " + users.location}{<br/>}
            description: { " " + users.description}{<br/>}
            occupation: {" " + users.occupation}{<br/>}
          </Typography>
        </div>
        <div style={{display: "flex", justifyContent: "center"}}>
          <Typography style={{height: "45px", width: "150px", borderRadius: "15px", backgroundColor: "#4874F8"}}>
            {<Link to={`/photos/${userId}`} style={{display: "flex", justifyContent: "center", margin: "10px 0 0 0",color: 'inherit', textDecoration: 'none'}}>查看用户图片</Link>}
          </Typography>
        </div>
      </div>
    );
  }
}

export default withRouter(UserDetail);
